<template>
  <el-card>
    <div class="sales-tab">
      <el-tabs v-model="tab">
        <el-tab-pane label="销售额" name="sales"></el-tab-pane>
        <el-tab-pane label="访问量" name="visited"></el-tab-pane>
      </el-tabs>
      <div class="sales-date">
        <el-radio-group  class="sales-radio" v-model="radio"
        @change="handleRadio"
        >
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>
        <el-date-picker type="daterange"
        v-model="date"
        unlink-panels
         range-separator="至" 
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         :shortcuts="shortcuts"
         />
      </div>      
    </div>
    <div class="sales" ref="salesRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "Sales",
};
</script>

<script lang="ts" setup>
import { ref ,onMounted} from 'vue';
import dayjs from 'dayjs';
import * as echarts from "echarts"
import { watch } from 'vue';
import type { ECharts } from "echarts";

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const start=dayjs().format("YYYY-MM-DD")
const date=ref([start,start])
const radio=ref("今日")
const handleRadio=(val:any)=>{
if(val==="今日"){
  const start=dayjs().format("YYYY-MM-DD")
  date.value=[start,start]
}else if(val==="本周"){
  const start=dayjs().startOf("week").add(1,'day').format("YYYY-MM-DD")
  const end=dayjs().endOf("week").add(1,'day').format("YYYY-MM-DD")
  date.value=[start,end]
}else if(val==="本月"){
  const start=dayjs().startOf("month").format("YYYY-MM-DD")
  const end=dayjs().endOf("month").format("YYYY-MM-DD")
  date.value=[start,end]
}else{
  const start=dayjs().startOf("year").format("YYYY-MM-DD")
  const end=dayjs().endOf("year").format("YYYY-MM-DD")
  date.value=[start,end]
}

}

const tab=ref("sales")
const salesRef=ref()
watch(tab, (tab) => {
  myEcharts.setOption({
    title: {
      text: tab === "sales" ? "销售趋势" : "访问量趋势",
    },
    series: {
      data: getData(),
    },
  });
});
function getData(){
  const data=[];
  for(let i=0;i<12;i++){
    data.push(Math.round(Math.random()*70+30))
  }
  return data
}

let myEcharts:ECharts
onMounted(()=>{
 myEcharts=echarts.init(salesRef.value)
const option={
  xAxis:{ 
    data:[
      "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
  ]
  },
  yAxis:{
title:{
  text:"销售趋势"
}
  },
  series:{
    type:"bar",
    data: [25, 15, 46, 20, 14, 35, 15, 46, 20, 34, 34, 13],
  }
}
myEcharts.setOption(option)
})
</script>

<style scoped>
  .sales-tab{
position: relative;

  }
  .sales-date{
    position: absolute;
    right: 0;
    top:0;
    display: flex;
  }
  .sales-radio{
   
   margin-right: 10px;
  }
  .sales{
    height: 300px;
    width: 100%;
  }
</style>
